<template>
  <el-container class="home">
    <aside-view />
    <el-main>
      <section class="welcom-container" v-if="activeMenu === 'welcom'">
        <WelcomView />
      </section>
      <section style="width: 100%; height: 100%" v-else>
        <el-empty
          v-if="!list.length"
          description="暂无数据"
          style="width: 100%; height: 100%"
        ></el-empty>
        <div v-else class="list">
          <div
            class="list-item"
            v-for="(item, index) in list"
            :key="index"
            @click="handleView(item.id)"
          >
            <el-card shadow="hover">
              <div class="top">
                <div class="icon">
                  <img :src="item.cover ? item.cover : '/image/vue.svg'" />
                </div>
                <div class="teaching">
                  <h3 :title="item.name">{{ item.name }}</h3>
                  <div class="desc" :title="item.description">{{ item.description }}</div>
                </div>
              </div>
              <div class="bottom">
                <div>
                  <el-icon size="18">
                    <i-ep-Document />
                  </el-icon>
                  <span class="count">{{ item.docCount }}</span>
                </div>
                <el-divider direction="vertical"></el-divider>
                <div>
                  <el-icon size="18">
                    <i-ep-View />
                  </el-icon>
                  <span class="count">{{ item.viewCount }}</span>
                </div>
                <el-divider direction="vertical"></el-divider>
                <div>
                  <el-icon size="18">
                    <i-ep-Pointer />
                  </el-icon>
                  <span class="count">{{ item.voteCount }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </section>
    </el-main>
  </el-container>
</template>

<script setup>
import AsideView from './AsideView.vue'
import { getEbookList } from '../../api/ebook'
import { useRouter } from 'vue-router'
import WelcomView from './WelcomView.vue'

const router = useRouter()

const list = ref([])
const activeMenu = ref('welcom')
let category2Id = null

const handleView = (id) => {
  router.push({ path: 'docDetail', query: { ebookId: id } })
}

const menuClick = (key) => {
  activeMenu.value = key
  if (activeMenu.value === 'welcom') {
    category2Id = null
  } else {
    category2Id = key
    getList()
  }
}

const getList = async () => {
  const { success, data, message } = await getEbookList({
    category2Id: category2Id,
    page: 1,
    size: 1000
  })
  if (success) {
    list.value = data.list
  } else {
    ElMessage({
      type: 'error',
      message
    })
  }
}

// 依赖注入
provide('homeOption', { activeMenu, menuClick })
</script>
<style lang="scss" scoped>
.home {
  min-width: 1400px;
  height: calc(100% - 60px - 60px);
  overflow: hidden;
  .welcom-container {
    box-sizing: border-box;
    height: 100%;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      width: calc(100% / 4);
      margin-bottom: 10px;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        &:hover {
          cursor: pointer;
          color: $color-primary;
        }
        .icon {
          width: 110px;
          height: 110px;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .teaching {
          width: calc(100% - 110px - 10px);
          box-sizing: border-box;
          margin-left: 10px;
          h3 {
            margin-top: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .desc {
            font-size: 15px;
            color: $regular-text;
            /* 设置文本只显示三行 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            box-orient: vertical;
            line-clamp: 3;
            overflow: hidden;
            /* 设置文本超出部分省略 */
            text-overflow: ellipsis;
            margin-bottom: 20px;
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        & > div {
          display: flex;
          align-items: center;
          .count {
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>
